<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 :: El Radio Dorado</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var cantRadios = 13;
                var cnv = document.getElementById("canvas");
                var cnx = cnv.getContext('2d');
                cnx.beginPath();
                var fibonacci = [5, 5];
                for (var i = 2; i < cantRadios; i++) {
                    fibonacci[i] = fibonacci[i - 1] + fibonacci[i - 2]
                }
                
                var x0 = cnv.width / 2;
                var y0 = cnv.height / 2;
                var fromX = x0;
                var fromY = y0;
                var toY, toX, midX, midY;
                var xSign = -1, ySign = 1;
                var xSignCount = 1, ySignCount = 0;
                cnx.moveTo(fromX, fromY);
                
                for (var i = 0; i < fibonacci.length; i++) {
                    //cnx.beginPath();
                    var radio = fibonacci[i];
                    toY = fromY + ySign * radio;
                    toX = fromX + xSign * radio;
                    midX = fromX;
                    midY = fromY;
                    
                    if (xSignCount >= 1) {
                        midX += xSign * radio;
                    }
                    
                    if (ySignCount >= 1) {
                        midY += ySign * radio;
                    }
                    
                    cnx.arcTo(midX, midY, toX, toY, radio);
                    
                    xSignCount++;
                    ySignCount++;
                    //cnx.arc(fromX, fromY, 2, 0, 2 * Math.PI, true);
                    //cnx.moveTo(toX, toY);
                    
                    fromX = toX;
                    fromY = toY;
                    
                    if (xSignCount >= 2) {
                        xSign *= -1;
                        xSignCount = 0;
                    }
                    
                    if (ySignCount >= 2) {
                        ySign *= -1;
                        ySignCount = 0;
                    }
                }
                cnx.stroke();
            });
        </script>

        <style type="text/css">
            body {
                font-family: 'Helvetiva Neue', Verdana, Helvetica, sans-serif;
                font-size: 12px;
            }

            div.container {
                width: 1000px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h3>El Radio Dorado</h3>
            <canvas width="800" height="720" id="canvas" style="border: 1px #777 solid; padding: 10px;"></canvas>
        </div>
    </body>
</html>

